import React from 'react';
import FormEnhance, {InputSwitch, InputText} from "common/form";
import {SecurityMenu} from "type/entity/SecurityMenu";
import {fetchUpdateMenu} from "storage/redux/async-action/menuAsyncAction";
import IconFont from "util/icon-util";
import {useLocation} from "react-router-dom";
import MenuSelectHandler from "./MenuSelectHandler";
const MenuUpdateComponent = () => {

    const { icon } = useLocation().state as SecurityMenu;
    const [ iconValue, setIconValue ] = React.useState<string>(icon);
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setIconValue(e.target.value.trim());
    };

    return (
        <FormEnhance<SecurityMenu>
            title={"更新菜单"}
            backupText={"菜单列表"}
            requestAction={fetchUpdateMenu}

            
        >
            <MenuSelectHandler/>
            <InputText<SecurityMenu> name={"label"} label={"菜单标签"}/>
            <InputText<SecurityMenu> name={"explain"} label={"菜单描述"}/>
            <InputText<SecurityMenu> name={"menuOrder"} label={"菜单排序"}/>
            <InputText<SecurityMenu> name={"icon"} label={"菜单图标"} suffix={<IconFont type={iconValue}/>} onChange={onChange}/>
            <InputSwitch<SecurityMenu> name={"last"} label={"子菜单"}/>
            <InputSwitch<SecurityMenu> name={"disabled"} label={"菜单禁用"}/>
        </FormEnhance>
    );
};

export default MenuUpdateComponent;